<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				height: 100%;
			}
			
			canvas {
				display: block;
			}
		</style>
	</head>

	<body onload="draw();">

	</body>
	<script src="./js/three.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/OrbitControls.js"></script>
	<script src="./js/stats.min.js"></script>
	<script src="./js/dat.gui.min.js"></script>
	<script>
		var renderer;

		function initRender() {

			renderer = new THREE.WebGLRenderer({
				antialias: true,
				alpha: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);

			//告诉渲染器需要阴影效果
			//renderer.shadowMap.enabled = true;
			//renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
			renderer.setClearColor(0x555dc4);
			document.body.appendChild(renderer.domElement);
		}

		var camera;

		function initCamera() {

			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

			camera.position.set(600, 0, 0);

			camera.lookAt(new THREE.Vector3(0, 0, 0));

		}

		var scene;

		function initScene() {

			scene = new THREE.Scene();

		}

		function initModel() {
			//辅助工具
			var helper = new THREE.AxesHelper(10);
			scene.add(helper);
			var map0 = new THREE.TextureLoader().load("./img/ball0.jpg");
			var map1 = new THREE.TextureLoader().load("./img/ball1.jpg");
			var map2 = new THREE.TextureLoader().load("./img/ball2.jpg");
			var materials = [new THREE.MeshBasicMaterial({
				map: map0
			}), new THREE.MeshBasicMaterial({
				map: map1
			}), new THREE.MeshBasicMaterial({
				map: map2
			})]
			var s = 25;
			var cube = new THREE.SphereGeometry(s / 2, s * 2, s);
			var ballR = 200;
			var levelN = 1;
			for(var i = 0; i <= 20; i++) {
				var y = Math.cos(9 * i / 180 * Math.PI) * ballR;
				var curR = Math.sin(9 * i / 180 * Math.PI) * ballR;

				if(i < 10) {
					levelN += 3;
				} else {
					levelN -= 3;
				}
				console.log(levelN)
				for(var j = 0; j < levelN; j++) {
					var z = Math.sin(360 / levelN * j / 180 * Math.PI) * curR;
					var x = Math.cos(360 / levelN * j / 180 * Math.PI) * curR;

					var mesh = new THREE.Mesh(cube,materials[Math.floor(Math.random()*3)]);
					mesh.position.set(x, y, z);
					mesh.updateMatrix();
					scene.add(mesh);
				}

			}

		}
		//随机生成颜色
		function randomColor() {
			var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
				strHex = "#",
				index;
			for(var i = 0; i < 6; i++) {
				index = Math.round(Math.random() * 15);
				strHex += arrHex[index];
			}
			return strHex;
		}

		//声明raycaster和mouse变量
		var raycaster = new THREE.Raycaster();

		var mouse = new THREE.Vector2();

		function onMouseClick(event) {

			//通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
			mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
			mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

			// 通过鼠标点的位置和当前相机的矩阵计算出raycaster
			raycaster.setFromCamera(mouse, camera);

			// 获取raycaster直线和所有模型相交的数组集合
			var intersects = raycaster.intersectObjects(scene.children);

			//将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
			intersects[0] && scene.remove(intersects[0].object);
		}

		window.addEventListener('click', onMouseClick, false);
		//初始化dat.GUI简化试验流程
		var gui;

		//初始化性能插件
		var stats;

		function initStats() {
			stats = new Stats();
			document.body.appendChild(stats.dom);
		}

		//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
		var controls;

		function initControls() {
			controls = new THREE.OrbitControls(camera, renderer.domElement);
			// 如果使用animate方法时，将此函数删除

			//controls.addEventListener( 'change', render );

			// 使动画循环使用时阻尼或自转 意思是否有惯性

			controls.enableDamping = true;

			//动态阻尼系数 就是鼠标拖拽旋转灵敏度

			//controls.dampingFactor = 0.25;

			//是否可以缩放

			controls.enableZoom = true;

			//是否自动旋转

			controls.autoRotate = false;

			//设置相机距离原点的最近距离

			controls.minDistance = 50;

			//设置相机距离原点的最远距离

			controls.maxDistance = 2000;

			//是否开启右键拖拽

			controls.enablePan = true;

		}

		function render() {
			renderer.render(scene, camera);

		}

		//窗口变动触发的函数
		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			render();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}

		function animate() {

			//更新控制器

			render();

			//更新性能插件
			stats.update();

			//controls.update();
			requestAnimationFrame(animate);

		}

		function draw() {

			initRender();

			initScene();

			initCamera();

			initModel();

			initControls();

			initStats();

			animate();

			window.onresize = onWindowResize;

		}
	</script>

</html>